<template>
  <yt-page :title="title" :rightData="rightData">
    <yt-group :autoRefresh="false" :group="false" :searchApi="searchApi" ref="group">
      <div slot-scope="item">
        <weixin-open-file v-if="isWeixin" :title="item.name" :url="item.url">{{item.name}}</weixin-open-file>
        <yt-cell-open-file v-if="!isWeixin" :title="item.name" :url="item.url">
          {{item.name}}
        </yt-cell-open-file>
      </div>
    </yt-group>
    <yt-popup pos="right" v-model="showSearch" :mask="true" slot="alert">
      <yt-page class="page" :flex="true" :leftData="[]" title="按类别查询">
        <yt-form>
          <yt-inlineSelect v-model="selected" :list="tabsDic" :x="2" label="D_text" val="D_code"></yt-inlineSelect>
          <yt-btn-group slot="btn" :shadow="false" edge>
            <yt-btn theme="white" @click="onReset()">重置</yt-btn>
            <yt-btn @click="onSearch(selected)">查询</yt-btn>
          </yt-btn-group>
        </yt-form>
      </yt-page>
    </yt-popup>
  </yt-page>
</template>

<script>
import Router from '@/router'
import { commonApi } from '@/common/api/commonApi.js'
import _ from 'lodash'
import WeixinOpenFile from './weixinOpenFile'
import Mmbs from 'mmbs'

export default {
  data() {
    return {
      isWeixin: false,
      title: '',
      showSearch: false,
      rightData: [
        {
          font: 'yt-icon yt-icon-search',
          click: () => {
            this.showSearch = !this.showSearch
          }
        }
      ],
      tabsDic: [],
      selected: '',
      canRenderGroup: false,
      searchApi: async ({ skip, limit }) => {
        this.tabsDic = await this.fetchTabsDic()
        let currentTab = this.tabsDic.find(val => val.D_code === this.selected)
        this.title = currentTab ? currentTab.D_text : '知识库'

        if (this.selected !== 'yj_case') {
          let param = {}
          if (!this.selected) {
            param = { skip, limit }
          } else {
            param = {
              skip,
              limit,
              equalTo: { fileCategory: this.selected }
            }
          }
          let items = await commonApi.search('GO_dangerous_chemicals', param)

          items = _.map(items, v => {
            return {
              name: v.fileList ? v.fileList[0].name : '',
              url: v.fileList ? v.fileList[0].url : ''
            }
          })
          return items
        } else {
          let items = await commonApi.search('yj_case')

          let itemsAfter = []
          _.forEach(items, item => {
            _.forEach(item.file, file => {
              itemsAfter = _.concat(itemsAfter, [file])
            })
          })
          return itemsAfter
        }
      }
    }
  },
  components: { WeixinOpenFile },
  methods: {
    async fetchTabsDic() {
      try {
        // 加载过后，数据缓存起来
        if (!this.tabsDic.length) {
          let tabsDic = await commonApi.dictionary('enterprise_safety')
          tabsDic.push({ D_code: 'yj_case', D_text: '应急案例库' }) // 应急案例库是额外加上去的，不在同一张表里
          return tabsDic
        } else {
          return this.tabsDic
        }
      } catch (e) {
      }
    },
    onSearch(selected) {
      this.$refs.group.startPull()
      this.showSearch = false
    },
    onReset() {
      this.selected = ''
      this.$refs.group.startPull()
      this.showSearch = false
    }
  },
  created () {
    Mmbs.useAllowAnonymousKey = true // 因微信公众号内访问，开放接口访问权限
  },
  activated() {
    // 如果是微信内打开，对查看文件组件进行特殊处理
    if (this.$route.query && this.$route.query.client === 'weixin') {
      this.isWeixin = true
    }

    if (this.$route.query && this.$route.query.type) {
      this.selected = this.$route.query.type
    } else {
      this.selected = ''
    }
    this.$refs.group.startPull()
  },
  destroyed () {
    Mmbs.useAllowAnonymousKey = false // 离开页面，关闭接口访问权限
  }
}
</script>

<style scoped type="text/stylus" lang="stylus" rel="stylesheet/stylus">
>>> .yt-group
  background-color #fff
.file-item
  padding 15px 10px
  font-size 14px
</style>
